<template>
  <div class="container">
    <el-row>
      <el-col class="top-search">
        <el-input
          :value="listQuery.memberId"
          @input="value => (listQuery.memberId = value.replace(/[^\d]/g, ''))"
          :maxlength="MaxMemberIdLength"
          :placeholder="$t('please_input_member_id')"
          clearable
          class="w-180"
        />
        <el-input
          v-model="listQuery.nickName"
          :placeholder="$t('please_enter_member_nickname')"
          clearable
          class="w-240"
        />
        <el-input
          :value="listQuery.mobile"
          @input="value => (listQuery.mobile = value.replace(/[^\d]/g, ''))"
          :placeholder="$t('please_input_mobile_phone_number')"
          clearable
          class="w-180"
        />
        <label for="">{{ $t('applied_time') }}:</label>
        <el-date-picker
          v-model="datePicker1"
          class="w-240"
          type="daterange"
          align="right"
          value-format="yyyy-MM-dd"
        />
        <label v-if="listQuery.state!=0">{{ $t('processing_time') }}:</label>
        <el-date-picker
          v-if="listQuery.state!=0"
          v-model="datePicker2"
          class="w-240"
          type="daterange"
          align="right"
          value-format="yyyy-MM-dd"
        />
        <el-button type="primary" @click="search"> {{ $t('search') }} </el-button>
      </el-col>

      <el-col class="p-t-15">
        <el-menu
          :default-active="listQuery.state"
          class="el-menu-demo"
          mode="horizontal"
          @select="switchTab"
        >
          <el-menu-item index="0">{{ $t('not_yet_process') }}</el-menu-item>
          <el-menu-item index="1">{{ $t('approved') }}</el-menu-item>
          <el-menu-item index="2">{{ $t('not_approved') }}</el-menu-item>
        </el-menu>
      </el-col>

      <el-col class="p-t-20">
        <el-table
          v-loading="listLoading"
          :data="listData"
          border
          fit
          highlight-current-row
        >
          <el-table-column
            :label="$t('serial_number')"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                {{
                  (listQuery.pageNum - 1) * listQuery.pageSize +
                    scope.$index +
                    1
                }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('member_id')"
            prop="memberId"
            align="center"
            width="120"
          />

          <el-table-column
            :label="$t('member_nickname')"
            prop="nickName"
            align="center"
          />

          <el-table-column
            :label="$t('phone_number')"
            prop="mobile"
            align="center"
            width="120"
          />

          <el-table-column
            :label="$t('applied_time')"
            prop="createTime"
            align="center"
          >
            <template slot-scope="{ row }">
              <span> {{ row.createTime | fmtdate }} </span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('application_details')"
            prop="createTime"
            align="center"
          >
            <template slot-scope="{ row }">
              <el-button type="primary" @click="checkDetail(row)">
                {{ $t('details') }}
              </el-button>
            </template>
          </el-table-column>

          <el-table-column
            v-if="listQuery.state != 0"
            :label="$t('processing_time')"
            prop="createTime"
            align="center"
          >
            <template slot-scope="{ row }">
              <span> {{ row.updateTime | fmtdate }} </span>
            </template>
          </el-table-column>

          <el-table-column :label="$t('operation')" align="center">
            <template slot-scope="{ row }">
              <el-button
                v-if="row.state == 0"
                type="primary"
                @click="handle(row, 1)"
              >
                {{ $t('pass') }}
              </el-button>
              <el-button
                v-if="row.state == 0"
                type="danger"
                @click="handle(row, 2)"
              >
                {{ $t('not_approved') }}
              </el-button>
              <el-button type="primary" @click="goDetail(row.memberId)">
                {{ $t('member_details') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="total > 0" class="block fr p-t-15">
          <el-pagination
            :current-page="listQuery.pageNum"
            :page-sizes="[15, 20, 30]"
            :page-size="listQuery.pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="val => handlePageChange(val, 'pageSize')"
            @current-change="val => handlePageChange(val, 'pageNum')"
          />
        </div>
      </el-col>
    </el-row>

    <!-- 注销申请详情 -->
    <el-dialog
      :visible.sync="show.details"
      :close-on-click-modal="false"
      :title="$t('deactivation_details')"
      width="800px"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item :label="$t('member_status') + ':'">
          <span>{{ form.memberState ? $t('normal') : $t('seal_the_number') }}</span>
        </el-form-item>
        <el-form-item :label="$t('reason_for_deactivation') + ':'">
          <el-input
            v-model="form.cancelReason"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 20 }"
          />
        </el-form-item>
        <el-form-item :label="$t('member_nickname') + ':'">
          <span>{{ form.nickName }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="show.details = false">{{
          $t('close')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 注销申请处理 -->
    <el-dialog
      :visible.sync="show.handle"
      :close-on-click-modal="false"
      :title="$t('processing_of_deactivation_app')"
      width="800px"
    >
      <el-form v-if="form.state == 1" :model="form" label-width="120px">
        <el-form-item :label="$t('application_processing') + ':'">
          <span> {{ $t('pass') }}</span>
        </el-form-item>
        <el-form-item :label="$t('result') + ':'">
          <span> {{ $t('click_the_ok_button_and_the_') }}</span>
        </el-form-item>
      </el-form>

      <el-form v-if="form.state == 2" :model="form" label-width="120px">
        <el-form-item :label="$t('application_processing') + ':'">
          <span> {{ $t('not_approved') }}</span>
        </el-form-item>
        <el-form-item :label="$t('reason_for_rejection') + ':'">
          <el-input
            v-model="form.refuseReason"
            :placeholder="
              $t(
                'within_300_words_the_reason_fo'
              )
            "
            :autosize="{ minRows: 3, maxRows: 20 }"
            type="textarea"
            maxlength="300"
          />
        </el-form-item>
        <el-form-item :label="$t('notification_template') + ':'">
          <span>
            {{
              $t(
                'your_account_deactivation_appl'
              )
            }}</span
          >
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          :disabled="btnLoading"
          :loading="btnLoading"
          @click="show.handle = false"
          >{{ $t('close') }}</el-button
        >
        <el-button
          :disabled="btnLoading"
          :loading="btnLoading"
          type="primary"
          @click="handleApply"
          >{{ $t('confirm') }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCancelListApi,
  updateCancelStateApi
} from '@/api/user-exception-filtering/cancellation-apply.js';

const MaxMemberIdLength = 18;

export default {
  data() {
    return {
      MaxMemberIdLength,
      datePicker1: [],
      datePicker2: [],
      listLoading: false,
      btnLoading: false,
      listQuery: {
        memberId: null,
        nickName: null,
        mobile: null,
        state: '0', // 0-未处理 1-已通过 -2-不通过
        startCreateDate: null,
        endCreateDate: null,
        startUpdateDate: null,
        endUpdateDate: null,
        pageNum: 1,
        pageSize: 15
      },
      listData: [],
      total: 0,
      show: {
        details: false,
        handle: false
      },
      form: {
        memberState: null,
        refuseReason: null,
        id: null,
        state: null,
        nickName: null
      }
    };
  },

  created() {
    this.search();
  },

  methods: {
    search() {
      let {
        startCreateDate,
        endCreateDate,
        startUpdateDate,
        endUpdateDate
      } = this.listQuery;
      const { datePicker1, datePicker2 } = this;
      startCreateDate = (datePicker1 && this.datePicker1[0]) || null;
      endCreateDate = (datePicker1 && this.datePicker1[1]) || null;
      startUpdateDate = (datePicker2 && this.datePicker2[0]) || null;
      endUpdateDate = (datePicker2 && this.datePicker2[1]) || null;

      this.listQuery = {
        ...this.listQuery,
        startCreateDate,
        endCreateDate,
        startUpdateDate,
        endUpdateDate,
        pageNum: 1
      };
      this.getList();
    },

    async getList() {
      if (this.listLoading) return;
      this.listLoading = true;
      const { mobile } = this.listQuery;

      try {
        // eslint-disable-next-line camelcase
        const { state, result, error_msg } = await getCancelListApi({
          ...this.listQuery,
          mobile: mobile || null
        });
        this.listLoading = false;
        if (state == 1) {
          this.listData = result.list || [];
          this.total = Number(result.total) || 0;
        } else {
          this.$message.warning(error_msg);
        }
      } catch (e) {
        this.listLoading = false;
      }
    },

    switchTab(val) {
      if (val == 0) {
        this.datePicker2 = [];
      }
      this.listQuery.state = val;
      this.search();
    },

    handle({ cancelReason, id, nickName, memberState }, state) {
      this.form = {
        cancelReason,
        memberState,
        id,
        state,
        nickName,
        refuseReason: null
      };
      this.show.handle = true;
    },

    checkDetail({
      cancelReason,
      refuseReason,
      id,
      state,
      nickName,
      memberState
    }) {
      this.form = {
        cancelReason,
        memberState,
        refuseReason,
        id,
        state,
        nickName
      };
      this.show.details = true;
    },

    goDetail(memberId) {
      const url = `${process.env.DATA_ADMIN}/#/userExceptionFilter/userDetail?memberId=${memberId}`;
      window.open(url);
    },

    handlePageChange(val, name) {
      this.listQuery[name] = val;
      this.getList();
    },

    async handleApply() {
      const { id, state, refuseReason } = this.form;
      if (state == 2 && (!refuseReason || refuseReason.trim() == '')) {
        this.$message.warning(this.$t('please_enter_the_reason_for_re'));
        return;
      }

      if (this.btnLoading) return;
      this.btnLoading = true;

      const query = {
        id,
        state,
        refuseReason
      };

      try {
        // eslint-disable-next-line camelcase
        const { state: status, error_msg } = await updateCancelStateApi(query);
        if (status == 1) {
          this.$message.success(this.$t('operate_successfully'));
          this.show.handle = false;
          this.getList();
        } else {
          this.$message.warning(error_msg);
        }
      } catch (e) {
        console.log(e);
      } finally {
        this.btnLoading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 15px;

  .top-search {
    margin: 10px 0;

    label {
      font-size: 12px;
      font-weight: 400;
      margin-right: 5px;
    }
  }

  .details-img {
    display: inline-block;
    width: 298px;
    height: 224px;
    object-fit: cover;
    margin: 0 20px 20px 0;
  }
}
</style>
